<template>
  <PanerForm :isShowBarDrawer="true" :caption="'报错信息'">
    <template #body>
      <div class="d-section">
        <div class="d-caption-lead">基本信息</div>
      </div>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">页面地址</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.href" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">错误名称</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.name" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">报错信息</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.message" class="d-form-input" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">文件地址</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.url" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">文件名称</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.fileName" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">行数</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.lineNumber" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">列数</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.columnNumber" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">错误栈</label>
          </div>
          <div class="d-form-el">
            <textarea v-model="state.stack" class="d-form-textarea"></textarea>
          </div>
        </div>
        <FormCalendar
          v-model="state.time"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="产生时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-12"
        ></FormCalendar>
      </div>
      <div class="d-section">
        <div class="d-caption-lead">相关信息</div>
      </div>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">所属分组</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.gid" class="d-form-select" disabled>
              <option v-for="item in groupList" :key="item.id" :value="item.id">{{ item.text }}</option>
            </select>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">协议类型</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.pageProtocol" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">主机地址</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.pageHost" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">路径</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.pagePathname" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">浏览器</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.userAgent" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">语言</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.language" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">平台</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.platform" class="d-form-input"  />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">描述</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.description" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">标签</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.labels" class="d-form-input" type="text" />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.updateTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="修改时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-6"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">修改人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.updateUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.createTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="创建时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-6"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">创建人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.createUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
      </div>
    </template>
    <template #bar-drawer>
      <button @click="handleSubmit" class="d-btn d-btn-primary" type="button">提交</button>
      <button v-if="!isEdit" @click="handleReset" class="d-btn d-btn-default" type="reset">重置</button>
      <a v-d-goback class="d-btn d-btn-default">返回</a>
    </template>
  </PanerForm>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages'
import { Table, TableColumn, Dialoger, FormCalendar, FormSelecter, FormInput, Switcher, FormTextarea } from '@daelui/vdog/dist/components'
import { parser } from '@daelui/dogjs/dist/components'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import { STATUS } from '@daelui/dogjs/dist/constant'
import colSer from '@/service/action/collect-error.action.js'
import colGroSer from '@/service/action/collect-error-group.action.js'

export default {
  components: {
    Table,
    TableColumn,
    PanerForm,
    FormCalendar,
    FormSelecter,
    FormInput,
    FormTextarea,
    Switcher
  },

  data () {
    return {
      STATUS,
      isEdit: false, // 是否是编辑模式
      // 表单数据
      state: {
        id: '',
        name: '',
        labels: '',
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      groupList: []
    }
  },

  methods: {
    /**
     * @function 加载笔记
    */
    loadItem (id) {
      colSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        data.request = parser.stringify(parser.parse(data.request), null, ' ')
        data.response = parser.stringify(parser.parse(data.response), null, ' ')
        data.reqHeaders = parser.stringify(parser.parse(data.reqHeaders), null, ' ')
        data.resHeaders = parser.stringify(parser.parse(data.resHeaders), null, ' ')
        this.state = data
      })
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      let defer = null
      let data = { ...this.state }
      // 编辑
      if (this.isEdit) {
        defer = colSer.editItem(data)
      } else { // 添加
        defer = coler.addItem(data)
      }
      defer.then(result => {
        if (result.success) {
          Dialoger.success(locale.action.success)
        } else {
          Dialoger.danger(locale.action.fail)
        }
        // 添加则回到列表页
        if (!this.isEdit) {
          this.$router.push(this.getMicroRoute('/collect/error/list'))
        }
      })
    },
    /**
     * @function 重置
    */
    handleReset () {

    }
  },

  beforeMount () {
    let params = this.$route.params
    // 新建
    if (!params.id) {
      this.isEdit = false
    } else { // 编辑
      this.isEdit = true
      this.loadItem(params.id)
    }
  },

  mounted () {
    colGroSer.queryListAll({ hasAll: true }).then(list => {
      this.groupList = list
    })
  }
}
</script>

<style lang="less" scoped>
.d-form-label {
  width: 90px;
}
.d-form-textarea {
  min-height: 320px;
}
.d-form-group /deep/.ql-container .ql-editor {
  min-height: 200px;
}
</style>
